<template>
  <view class="container">
    <!-- 渐变背景层 -->
    <view class="bg-gradient"></view>
    
    <!-- 主内容区 -->
    <view class="content-wrapper">
      <!-- 标题区 -->
      <view class="header glassmorphism">
        <text class="title">答题记录</text>
        <view class="divider"></view>
      </view>

      <!-- 自定义日历组件 -->
      <view class="calendar-wrapper" v-if="!loading && calendarReady">
        <view class="calendar-header">
          <text class="calendar-title">{{ currentYear }}年 {{ currentMonth + 1 }}月</text>
          <view class="calendar-controls">
            <view class="control-btn" @click="prevMonth">◄</view>
            <view class="control-btn" @click="nextMonth">►</view>
          </view>
        </view>
        <view class="calendar-grid">
          <view class="weekday" v-for="day in weekdays" :key="day">{{ day }}</view>
          <view 
            v-for="date in calendarDates" 
            :key="date.key" 
            class="date-cell" 
            :class="{ 
              'inactive': date.inactive, 
              'selected': date.date === selectedDate, 
              'marked': markedDates.includes(date.date),
              'disabled': date.isFuture
            }"
            @click="selectDate(date)"
          >
            <text>{{ date.day }}</text>
          </view>
        </view>
      </view>
      <view class="error-state" v-else-if="!loading && !calendarReady">
        <uni-icons type="info" size="48" color="#A3BFFA" />
        <text>无法加载日历，请检查网络后重试</text>
        <view class="action-btn retry-btn" @click="retryLoad">重试</view>
      </view>
      <view class="loading" v-else>
        <view class="spinner"></view>
        <text>加载日历...</text>
      </view>

      <!-- 当日无记录提示 -->
      <view class="no-records glassmorphism" v-if="!loading && showNoRecords">
        <uni-icons type="calendar" size="48" color="#A3BFFA" />
        <text class="no-records-text">{{ selectedDate }} 暂无答题记录</text>
        <view class="action-btn" @click="goToQuiz">开始答题</view>
      </view>

      <!-- 仅在有记录时显示筛选模式、数据看板和答题记录列表 -->
      <template v-if="!loading && !showNoRecords && calendarReady">
        <!-- 筛选模式 -->
        <view class="filter-panel glassmorphism">
          <view 
            class="filter-option" 
            :class="{ active: filterMode === 'all' }"
            @click="setFilterMode('all')"
          >
            <text>全部记录</text>
          </view>
          <view 
            class="filter-option" 
            :class="{ active: filterMode === 'wrong' }"
            @click="setFilterMode('wrong')"
          >
            <text>仅错题</text>
          </view>
        </view>

        <!-- 数据看板 -->
        <view class="stats-panel glassmorphism">
          <view class="stat-item">
            <uni-icons type="list" size="28" color="#5B7FFA" />
            <text class="stat-value">{{ filteredTotalQuestions }}</text>
            <text class="stat-label">总答题量</text>
          </view>
          <view class="stat-item">
            <uni-icons type="medal" size="28" color="#5B7FFA" />
            <text class="stat-value">{{ filteredCorrectCount }}</text>
            <text class="stat-label">正确答题</text>
          </view>
          <view class="stat-item">
            <uni-icons type="star" size="28" color="#5B7FFA" />
            <text class="stat-value">{{ filteredCorrectRate }}%</text>
            <text class="stat-label">正确率</text>
          </view>
        </view>

        <!-- 暂无记录提示（整个列表为空） -->
        <view class="empty-state" v-if="markedDates.length === 0 && filteredQuestions.length === 0">
          <uni-icons type="info" size="48" color="#A3BFFA" />
          <text class="empty-text">暂无答题记录</text>
          <view class="action-btn" @click="goToQuiz">开始答题</view>
        </view>

        <!-- 答题记录列表 -->
        <scroll-view 
          scroll-y 
          class="wrong-list" 
          @scrolltolower="loadMore"
          enable-back-to-top
        >
          <view v-if="loading && !filteredQuestions.length" class="loading">
            <view class="spinner"></view>
            <text>加载中...</text>
          </view>
          <view 
            v-else 
            v-for="(question, index) in filteredQuestions.slice(0, page * pageSize)" 
            :key="question._id" 
            class="wrong-card glassmorphism"
            :style="question.style"
            @touchstart="cardScale(index, true)"
            @touchend="cardScale(index, false)"
          >
            <text class="question-title">{{ index + 1 }}. {{ question.content }}</text>
            <view class="options">
              <view v-for="(value, key) in question.options" :key="key" class="option">
                <text :class="{ 'correct': key === question.correct_answer, 'wrong': key === question.user_answer && key !== question.correct_answer }">
                  {{ key }}. {{ value }}
                </text>
              </view>
            </view>
            <view class="explanation" v-if="question.explanation">
              <uni-icons type="bulb" size="16" color="#FF9800" />
              <text>解析：{{ question.explanation }}</text>
            </view>
            <view class="time-stamp" v-if="question.answered_at">
              <uni-icons type="time" size="14" color="#A3BFFA" />
              <text>{{ formatTime(question.answered_at) }}</text>
            </view>
          </view>
          <!-- 加载更多提示 -->
          <view class="load-more" v-if="hasMore && !loading">
            <text>下拉加载更多</text>
          </view>
          <view class="load-more" v-if="!hasMore && filteredQuestions.length > 0">
            <text>没有更多记录了</text>
          </view>
        </scroll-view>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      totalQuestions: 0,
      correctCount: 0,
      correctRate: 0,
      allQuestions: [],
      filteredQuestions: [],
      loading: false,
      page: 1,
      pageSize: 20,
      hasMore: true,
      selectedDate: '',
      filterMode: 'all',
      markedDates: [],
      filteredTotalQuestions: 0,
      filteredCorrectCount: 0,
      filteredCorrectRate: 0,
      cache: {}, // 数据缓存
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth(),
      weekdays: ['日', '一', '二', '三', '四', '五', '六'],
      showNoRecords: false, // 控制当日无记录提示
      calendarReady: false // 控制日历是否准备好
    };
  },
  computed: {
    calendarDates() {
      // 确保 currentYear 和 currentMonth 有效
      if (!this.currentYear || this.currentMonth === undefined) {
        console.error('currentYear 或 currentMonth 未定义', {
          currentYear: this.currentYear,
          currentMonth: this.currentMonth
        });
        return [];
      }

      const dates = [];
      const today = new Date(2025, 4, 4); // 当前日期：2025-05-04
      const firstDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
      const daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
      const prevMonthDays = new Date(this.currentYear, this.currentMonth, 0).getDate();

      // 添加上个月的填充日期
      for (let i = firstDay - 1; i >= 0; i--) {
        const day = prevMonthDays - i;
        const date = `${this.currentYear}-${this.currentMonth.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
        const isFuture = new Date(this.currentYear, this.currentMonth - 1, day) > today;
        dates.push({ day, date, inactive: true, isFuture, key: `prev-${i}` });
      }

      // 添加本月日期
      for (let i = 1; i <= daysInMonth; i++) {
        const date = `${this.currentYear}-${(this.currentMonth + 1).toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`;
        const isFuture = new Date(this.currentYear, this.currentMonth, i) > today;
        dates.push({ day: i, date, inactive: false, isFuture, key: `current-${i}` });
      }

      // 添加下个月的填充日期
      const totalCells = Math.ceil((firstDay + daysInMonth) / 7) * 7;
      for (let i = 1; dates.length < totalCells; i++) {
        const date = `${this.currentYear}-${(this.currentMonth + 2).toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`;
        const isFuture = new Date(this.currentYear, this.currentMonth + 1, i) > today;
        dates.push({ day: i, date, inactive: true, isFuture, key: `next-${i}` });
      }

      return dates;
    }
  },
  onLoad() {
    // 初始化默认日期
    const today = new Date();
    this.selectedDate = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`;
    this.currentYear = today.getFullYear();
    this.currentMonth = today.getMonth();
    console.log('初始日期:', this.selectedDate);
    this.loadAnswerHistory();
  },
  onPullDownRefresh() {
    this.page = 1;
    this.allQuestions = [];
    this.filteredQuestions = [];
    this.hasMore = true;
    this.cache = {};
    this.showNoRecords = false;
    this.calendarReady = false;
    this.markedDates = [];
    this.loadAnswerHistory().finally(() => {
      uni.stopPullDownRefresh();
    });
  },
  methods: {
    async loadAnswerHistory() {
      const userId = uni.getStorageSync('user').id;
      if (!userId) {
        uni.showToast({ title: '请先登录', icon: 'none', duration: 2000 });
        this.loading = false;
        this.calendarReady = false;
        return;
      }

      const cacheKey = `${userId}_${this.selectedDate}_${this.page}`;
      if (this.cache[cacheKey]) {
        console.log('缓存命中:', cacheKey);
        this.allQuestions = this.cache[cacheKey].questions;
        this.totalQuestions = this.cache[cacheKey].totalQuestions;
        this.correctCount = this.cache[cacheKey].correctCount;
        this.correctRate = this.cache[cacheKey].correctRate;
        this.hasMore = this.cache[cacheKey].hasMore;
        this.filterRecords();
        this.updateMarkedDates();
        this.checkNoRecords();
        this.calendarReady = true;
        return;
      }

      this.loading = true;
      try {
        const res = await uniCloud.callFunction({
          name: 'getAnswerHistory',
          data: {
            user_id: userId,
            skip: (this.page - 1) * this.pageSize,
            limit: this.pageSize,
            date: this.selectedDate
          }
        });

        console.log('云函数完整响应:', res.result);
        if (res.result.code === 0) {
          const data = res.result.data;
          console.log('返回数据:', data);
          if (this.page === 1) {
            this.totalQuestions = data.totalQuestions || 0;
            this.correctCount = data.correctCount || 0;
            this.correctRate = data.correctRate || 0;
          }

          const newRecords = data.answer_history || [];
          this.allQuestions = this.page === 1 ? newRecords : [...this.allQuestions, ...newRecords];
          this.hasMore = newRecords.length === this.pageSize && this.allQuestions.length < this.totalQuestions;

          this.cache[cacheKey] = {
            questions: this.allQuestions,
            totalQuestions: this.totalQuestions,
            correctCount: this.correctCount,
            correctRate: this.correctRate,
            hasMore: this.hasMore
          };

          this.updateMarkedDates();
          this.filterRecords();
          this.checkNoRecords();
          this.calendarReady = true;
        } else if (res.result.code === -1) {
          // 假设 code: -1 表示无记录
          console.log('无答题记录:', this.selectedDate);
          this.allQuestions = [];
          this.totalQuestions = 0;
          this.correctCount = 0;
          this.correctRate = 0;
          this.hasMore = false;
          this.cache[cacheKey] = {
            questions: [],
            totalQuestions: 0,
            correctCount: 0,
            correctRate: 0,
            hasMore: false
          };
          this.updateMarkedDates();
          this.filterRecords();
          this.checkNoRecords();
          this.calendarReady = true;
        } else {
          const errorMessages = {
            '-1': `${this.selectedDate} 暂无答题记录`,
            1: '用户数据不存在，请重新登录',
            2: '查询失败，请稍后重试',
            3: '服务器超时，请检查网络',
            4: '无效的请求参数'
          };
          const msg = errorMessages[res.result.code] || '获取答题记录失败';
          console.warn('云函数错误:', { code: res.result.code, message: res.result.message });
          uni.showToast({ title: msg, icon: 'none', duration: 2000 });
          this.calendarReady = false;
        }
      } catch (e) {
        console.error('获取答题记录失败:', { message: e.message, stack: e.stack });
        let errorMsg = '网络错误，请稍后重试';
        if (e.message.includes('timeout')) {
          errorMsg = '请求超时，请检查网络';
        } else if (e.message.includes('unauthorized')) {
          errorMsg = '未授权，请重新登录';
        }
        uni.showToast({ title: errorMsg, icon: 'none', duration: 2000 });
        this.calendarReady = false;
      } finally {
        this.loading = false;
      }
    },
    loadMore() {
      if (!this.hasMore || this.loading) return;
      this.page++;
      this.loadAnswerHistory();
    },
    retryLoad() {
      this.loadAnswerHistory();
    },
    cardScale(index, isScaling) {
      this.$set(this.filteredQuestions[index], 'style', isScaling ? 'transform: scale(0.98)' : 'transform: scale(1)');
    },
    formatTime(timestamp) {
      const date = new Date(timestamp);
      const pad = num => num.toString().padStart(2, '0');
      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
    },
    selectDate(dateObj) {
      if (!dateObj || dateObj.isFuture) {
        console.log('阻止选择未来日期:', dateObj?.date);
        return;
      }
      console.log('选择日期:', dateObj.date);
      console.log('标记日期:', this.markedDates);
      this.selectedDate = dateObj.date;
      this.page = 1;
      this.allQuestions = [];
      this.filteredQuestions = [];
      this.hasMore = true;
      // 仅清除与当前日期相关的缓存
      const userId = uni.getStorageSync('user').id;
      const cacheKeyPrefix = `${userId}_${dateObj.date}_`;
      Object.keys(this.cache).forEach(key => {
        if (key.startsWith(cacheKeyPrefix)) {
          console.log('清除缓存:', key);
          delete this.cache[key];
        }
      });
      this.showNoRecords = false;
      this.loadAnswerHistory();
    },
    setFilterMode(mode) {
      this.filterMode = mode;
      this.filterRecords();
      this.checkNoRecords();
    },
    filterRecords() {
      let filtered = this.allQuestions;
      if (this.filterMode === 'wrong') {
        filtered = filtered.filter(record => !record.correct);
      }
      this.filteredQuestions = filtered;
      this.filteredTotalQuestions = filtered.length;
      this.filteredCorrectCount = filtered.filter(record => record.correct).length;
      this.filteredCorrectRate = this.filteredTotalQuestions > 0 
        ? ((this.filteredCorrectCount / this.filteredTotalQuestions) * 100).toFixed(2) 
        : 0;
      console.log('筛选后的问题:', this.filteredQuestions);
    },
    updateMarkedDates() {
      const dateMap = new Set(this.markedDates); // 保留现有标记日期
      this.allQuestions.forEach(record => {
        const date = new Date(record.answered_at);
        const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
        dateMap.add(formattedDate);
      });
      this.markedDates = Array.from(dateMap);
      console.log('标记日期:', this.markedDates);
    },
    checkNoRecords() {
      this.showNoRecords = this.filteredQuestions.length === 0;
      console.log('显示无记录提示:', this.showNoRecords, '选择日期:', this.selectedDate);
    },
    prevMonth() {
      this.currentMonth--;
      if (this.currentMonth < 0) {
        this.currentMonth = 11;
        this.currentYear--;
      }
    },
    nextMonth() {
      this.currentMonth++;
      if (this.currentMonth > 11) {
        this.currentMonth = 0;
        this.currentYear++;
      }
    },
    goToQuiz() {
      uni.switchTab({
        url: '/pages/student/quiz',
        fail(err) {
          console.error('导航到答题页面失败:', err);
          uni.showToast({ title: '无法跳转到答题页面，请重试', icon: 'none', duration: 2000 });
        }
      });
    }
  }
};
</script>

<style scoped>
/* 全局样式 */
.container {
  position: relative;
  min-height: 100vh;
  padding: 24px;
  background-color: #f5f7fa;
}

/* 动态渐变背景 */
.bg-gradient {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40vh;
  background: linear-gradient(135deg, #4a90e2 0%, #5aa1ff 100%);
  z-index: -1;
  border-radius: 0 0 40% 40%;
  animation: gradientShift 10s ease-in-out infinite;
}

@keyframes gradientShift {
  0% { background: linear-gradient(135deg, #4a90e2 0%, #5aa1ff 100%); }
  50% { background: linear-gradient(135deg, #5aa1ff 0%, #4a90e2 100%); }
  100% { background: linear-gradient(135deg, #4a90e2 0%, #5aa1ff 100%); }
}

/* 玻璃拟态效果 */
.glassmorphism {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 12px 48px rgba(31, 38, 135, 0.15);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.glassmorphism::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

/* 自定义日历样式 */
.calendar-wrapper {
  margin-bottom: 24px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 12px 48px rgba(31, 38, 135, 0.15);
  border-radius: 16px;
  padding: 12px;
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
}
.calendar-title {
  font-size: 18px;
  font-weight: 600;
  color: #1A202C;
  letter-spacing: 0.5px;
}
.calendar-controls {
  display: flex;
  gap: 8px;
}
.control-btn {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: #4a90e2;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.control-btn:hover {
  background: rgba(74, 144, 226, 0.4);
  transform: scale(1.1);
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 12px;
  animation: fadeIn 0.5s ease-out;
}
.weekday {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #718096;
  padding: 8px 0;
}
.date-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 14px;
  color: #1A202C;
  cursor: pointer;
  transition: all 0.3s ease;
  will-change: transform, background;
}
.date-cell.inactive {
  color: #A3BFFA;
}
.date-cell.selected {
  background: linear-gradient(135deg, #4a90e2, #5aa1ff);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
  transform: scale(1.05);
}
.date-cell.marked::after {
  content: '';
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #FF9800, #FFB300);
  border-radius: 50%;
  position: absolute;
  bottom: 6px;
  box-shadow: 0 0 8px rgba(255, 152, 0, 0.6);
  animation: pulse 2s ease-in-out infinite;
}
.date-cell:not(.disabled):hover {
  background: rgba(74, 144, 226, 0.15);
  transform: scale(1.05);
}
.date-cell.disabled {
  color: #CBD5E0;
  cursor: not-allowed;
  background: none;
}

/* 动画 */
@keyframes pulse {
  0% { box-shadow: 0 0 8px rgba(255, 152, 0, 0.6); }
  50% { box-shadow: 0 0 12px rgba(255, 152, 0, 0.8); }
  100% { box-shadow: 0 0 8px rgba(255, 152, 0, 0.6); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 当日无记录提示 */
.no-records {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  margin-bottom: 24px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  animation: fadeInUp 0.6s ease-out;
}
.no-records-text {
  margin: 16px 0;
  font-size: 16px;
  font-weight: 500;
  color: #5aa1ff;
  text-align: center;
}
.action-btn {
  padding: 10px 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, #4a90e2, #5aa1ff);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}
.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
}
.retry-btn {
  margin-top: 16px;
}

/* 筛选模式 */
.filter-panel {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 12px;
  margin-bottom: 24px;
}
.filter-option {
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.25);
  transition: all 0.3s ease;
  transform: scale(1);
}
.filter-option.active {
  background: linear-gradient(135deg, #4a90e2, #5aa1ff);
  color: #FFFFFF;
  transform: scale(1.05);
}
.filter-option text {
  font-size: 14px;
  font-weight: 500;
}

/* 标题区 */
.header {
  padding: 24px;
  margin-bottom: 24px;
}
.title {
  font-size: 26px;
  font-weight: 700;
  color: #1A202C;
  display: block;
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #5aa1ff, transparent);
  margin: 16px 0;
}

/* 数据看板 */
.stats-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 24px;
  margin-bottom: 24px;
  animation: fadeIn 0.8s ease-out;
}
.stat-item {
  text-align: center;
  transition: transform 0.3s ease;
}
.stat-item:hover {
  transform: translateY(-4px);
}
.stat-value {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: #4a90e2;
  margin: 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.stat-label {
  font-size: 14px;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

/* 错题列表 */
.wrong-list {
  height: calc(100vh - 60rpx - 500px);
  width: 100%;
  max-width: 600px;
}
.wrong-card {
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  transition: transform 0.3s;
  animation: cardEnter 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.wrong-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.question-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  line-height: 1.5;
}
.options {
  margin-bottom: 12px;
}
.option {
  font-size: 14px;
  padding: 6px 0;
}
.correct {
  color: #4CAF50;
  font-weight: 500;
}
.wrong {
  color: #F44336;
  font-weight: 500;
}
.explanation {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  background: rgba(255, 152, 0, 0.05);
  border-radius: 8px;
  margin-bottom: 12px;
  gap: 8px;
}
.explanation text {
  font-size: 14px;
  color: #FF9800;
  flex: 1;
}
.time-stamp {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #5aa1ff;
  margin-top: 16px;
}

/* 加载状态 */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: #4a90e2;
}
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #5aa1ff;
  border-top: 3px solid #4a90e2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 错误状态 */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: #5aa1ff;
}
.error-state text {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 500;
}

/* 暂无记录（整个列表为空） */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: #5aa1ff;
}
.empty-text {
  margin: 16px 0;
  font-size: 16px;
  font-weight: 500;
}
.empty-state .action-btn {
  margin-top: 8px;
}

/* 加载更多提示 */
.load-more {
  text-align: center;
  padding: 16px;
  color: #5aa1ff;
  font-size: 14px;
  font-weight: 500;
}

/* 动画效果 */
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 屏幕适配 */
@media (max-width: 360px) {
  .calendar-wrapper {
    padding: 8px;
  }
  .date-cell {
    width:  totally agree36px;
    height: 36px;
    font-size: 12px;
  }
  .no-records {
    padding: 16px;
  }
  .no-records-text {
    font-size: 14px;
  }
}
@media (max-height: 500px) {
  .wrong-list {
    height: calc(100vh - 60rpx - 400px);
  }
  .calendar-wrapper {
    padding: 8px;
  }
  .no-records {
    padding: 16px;
    margin-bottom: 16px;
  }
}
</style>